/*
 * @Description: 
 * @Author: wind-lc
 * @version: 1.0
 * @Date: 2023-05-08 17:04:06
 * @LastEditTime: 2023-05-10 16:57:50
 * @FilePath: \cscec-pms-admin\src\utils\devicePixelRatio.js
 */
import store from "../store"
/**
 * @description: 获取设备像素比例，通过修改html标签的zoom值使其恢复正常比例(Firefox浏览器不支持此属性，所以无效)
 * @param {string} mode 开启后解决Windows系统、Mac系统自动放大125%、150%、浏览器强制放大缩小等问题，有两种模式(默认1模式)
 * 1：模式获取屏幕分辨率与1920的比例动态放大缩小
 * 2：模式恢复实际物理分辨率动态放大缩小
 * @return {void}
 */
class DevicePixelRatio {
  constructor(mode = 1) {
    this.mode = mode
    // 判断设备类型参考
    // https://stackoverflow.com/questions/11381673/detecting-a-mobile-browser?page=1&tab=scoredesc#tab-top
    // MDN建议：
    // https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Browser_detection_using_the_user_agent
    // According to MDN's article on Browser detection using the user agent, it is encouraged to avoid this approach
    // if possible and suggest other avenues such as feature detection.
    // However, if one must use the user agent as a means to detect if the device is mobile, they suggest:
    // In summary, we recommend looking for the string “Mobi” anywhere in the User Agent to detect a mobile device.
    this.isMobileDevice = /Mobi/i.test(window.navigator.userAgent)
  }

  /**
   * @description: 获取设备屏幕显示比例
   * @return {number}
   */
  getDevicePixelRatio() {
    // 这里获取真实的html元素宽度
    let w = document.documentElement.clientWidth
    // 使用window.screen.width的话不能避免浏览器缩放
    // let w = window.screen.width
    let z = 1
    // 如果浏览器宽度大于1800不做纠正
    // if (window.screen.width > 1800){
    //   return z
    // }
    switch (this.mode) {
      case 1:
        z = w / 1920
        break
      case 2:
        z = 1 / window.devicePixelRatio
        break
      default:
        z = 1
    }
    return z
  }
  /**
   * @description: 绑定监听事件
   * @param {object} element
   * @param {string} type
   * @param {function} handler
   * @return {void}
   */
  addHandler(element, type, handler) {
    if (element.addEventListener) {
      element.addEventListener(type, handler, false)
    } else if (element.attachEvent) {
      element.attachEvent('on' + type, handler)
    } else {
      element['on' + type] = handler
    }
  }
  /**
   * @description: 监听浏览器缩放事件
   * @return {void}
   */
  watch() {
    const that = this
    this.addHandler(window, 'resize', function () {
      that.correct()
    })
  }
  /**
   * @description: 校正浏览器缩放
   * @return {void}
   */
  correct() {
    // 页面devicePixelRatio（设备像素比例）变化后，计算页面body标签zoom修改其大小，来抵消devicePixelRatio带来的变化
    const devicePixelRatio = this.getDevicePixelRatio()
    const redressPercentage = 100 / devicePixelRatio
    const root  = document.documentElement
    root.style.setProperty('--devicePixelRatio', devicePixelRatio)
    root.style.setProperty('--widthHeightPercentage', redressPercentage + '%')
    root.style.setProperty('--widthVw', redressPercentage + 'vw')
    root.style.setProperty('--heightVh', redressPercentage + 'vh')
    store.dispatch('setDevicePixelRatio', { devicePixelRatio, redressPercentage })
  }
  /**
   * @description: 初始化
   * @return {void}
   */
  init() {
    // PC端页面开启缩放修复
    if (!this.isMobileDevice) {
      // 初始化页面校正浏览器缩放比例
      this.correct()
      // 开启监听页面缩放
      this.watch()
    }
  }
}
export default DevicePixelRatio;